<template>
  <div class="order">
    <!-- 购物车标题 -->
    <p class="title"><i class="el-icon-tickets"></i>我的订单</p>
    <!-- 购物车列表 -->
    <div class="order-list">
      <div v-for="(item, index) in orderList" :key="index" class="record">
        <img :src="item.film.cover" alt="" />
        <p class="name">《{{ item.film.name }}》</p>
        <!-- <p>座位：{{ item.line }}排{{ item.row }}座</p> -->
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;座位：<span v-for="(item2, index2) in item.seats" :key="index2"
          >{{ item2.line }}排{{ item2.row }}座
        </span>
        <p>手机号码：{{ item.order.phone }}</p>
        <p class="time">下单时间：{{ item.order.createTime }}</p>
        <!-- 等待支付0 订单超时 1 支付成功2  订单异常3 -->
        <el-link class="st0 st" v-if="item.order.status == 0">等待支付</el-link>
        <el-link class="st1 st" v-if="item.order.status == 1" :underline="false"
          >订单超时</el-link
        >
        <el-link class="st2 st" v-if="item.order.status == 2" :underline="false"
          >支付成功</el-link
        >

        <el-tooltip
          class="item"
          effect="dark"
          content="请联系客服查询您的订单详情"
          placement="top"
        >
          <el-link class="st3 st" v-if="item.status == 3" :underline="false"
            >订单异常</el-link
          >
        </el-tooltip>
        <!-- <el-link type="danger"  ></el-link> -->
        <p class="price">￥{{ item.order.price }}</p>
      </div>
    </div>
  </div>
</template>
<script>
import { getOrder } from "@/api/order";
export default {
  data() {
    return {
      orderList: [
        // {
        //   name: "XXXXX",
        //   line: 3,
        //   row: 2,
        //   tel: "12345678912",
        //   pay: "2022-01-20 14:25",
        //   price: 30.5,
        //   imgAddress: require("@/assets/movie/u2282.svg"),
        //   status: 0,
        // },
        // {
        //   name: "XXXXX",
        //   line: 3,
        //   row: 3,
        //   tel: "12345678912",
        //   start: "2022-01-20 14:25",
        //   price: 30.5,
        //   imgAddress: require("@/assets/movie/u2282.svg"),
        //   status: 2,
        // },
        // {
        //   name: "XXXXX",
        //   line: 3,
        //   row: 3,
        //   tel: "12345678912",
        //   start: "2022-01-20 14:25",
        //   price: 30.5,
        //   imgAddress: require("@/assets/movie/u2282.svg"),
        //   status: 1,
        // },
        // {
        //   name: "XXXXX",
        //   line: 3,
        //   row: 3,
        //   tel: "12345678912",
        //   start: "2022-01-20 14:25",
        //   price: 30.5,
        //   imgAddress: require("@/assets/movie/u2282.svg"),
        //   status: 3,
        // },
        // {
        //   name: "XXXXX",
        //   line: 3,
        //   row: 3,
        //   tel: "12345678912",
        //   start: "2022-01-20 14:25",
        //   price: 30.5,
        //   imgAddress: require("@/assets/movie/u2282.svg"),
        //   status: 2,
        // },
        // {
        //   name: "XXXXX",
        //   line: 3,
        //   row: 3,
        //   tel: "12345678912",
        //   start: "2022-01-20 14:25",
        //   price: 30.5,
        //   imgAddress: require("@/assets/movie/u2282.svg"),
        //   status: 2,
        // },
      ],
    };
  },
  mounted() {
    this.loadOrder();
  },
  methods: {
    // <!-- 等待支付0 订单超时 1 支付成功2  订单异常3 -->

    // 加载订单页面
    loadOrder() {
      getOrder(localStorage.getItem("uid")).then((res) => {
        for(let i=0;i<res.data.length;i++){
          res.data[i].order.createTime=this.formatDate(res.data[i].order.createTime)
        }
        //  console.log(res);
        this.orderList=res.data
      });
    },


        // 日期格式化
    formatDate(dateint) {
      var date = new Date(parseInt(dateint));
      var str = date.getFullYear() + "-";
      if (date.getMonth() < 10) {
        str += "0";
      }
      str += date.getMonth() + 1 + "-";
      if (date.getDate() < 10) {
        str += "0";
      }
      str += date.getDate() + " ";
      if (date.getHours() < 10) {
        str += "0";
      }
      str += date.getHours() + ":";
      if (date.getMinutes() < 10) {
        str += "0";
      }
      str += date.getMinutes() + ":";
      if (date.getSeconds() < 10) {
        str += "0";
      }
      str += date.getSeconds();
      return str;
    },
  },
};
</script>
<style lang="scss" scoped>
.order {
  position: relative;
  width: 800px;
  height: 950px;
  margin: 40px 0 0 60px;

  .title {
    font-size: 30px;
  }

  .order-list {
    max-height: 900px;
    overflow: auto;
    .record {
      width: 750px;
      // height: 103px;
      border: 1px lightgray solid;
      padding: 15px;
      margin: 10px 0;
      box-shadow: 1px 1px 2px 0 darkgray;
      position: relative;
      img {
        width: 100px;
        height: 120px;
        float: left;
        margin-left: 30px;
      }
      p {
        font-size: 12px;
        color: gray;
        margin: 10px 0;
        margin-left: 160px;
      }
      .name {
        font-size: 18px;
        color: black;
        margin-bottom: 10px;
      }
      .price {
        color: red;
        font-size: 18px;
        position: absolute;
        right: 130px;
        bottom: 70px;
        margin: 0;
      }
      .st {
        float: right;
        font-size: 18px;
        position: absolute;
        right: 30px;
        bottom: 70px;
        margin: 0;
      }
      //   等待支付0 订单超时 1 支付成功2  订单异常3
      .st0 {
        color: #409eff;
      }
      .st1 {
        color: #f56c6c;
        cursor: progress;
      }
      .st2 {
        color: #67c23a;
        cursor: progress;
      }
      .st3 {
        color: #e6a23c;
        cursor: progress;
      }
    }
  }
}
</style>